<template>
  <el-container class="wrapper">
    <el-aside width="200px" class="right-menu" >
      <el-menu router class="orange-menu" active-text-color="#ff9800" style="border-right:hidden">
        <el-menu-item index="/orders"> <Orders style="margin-right: 5px;"/>全部订单</el-menu-item>
        <el-menu-item index="/done"> <Paid style="margin-right: 5px;"/>已完成</el-menu-item>
        <el-menu-item index="/unpaid"><unPaid style="margin-right: 5px;"/> 待付款</el-menu-item>
        <el-menu-item index="/paid"> <Done style="margin-right: 5px;"/>已付款</el-menu-item>
        <el-menu-item index="/pickup" ><pickUp style="margin-right: 5px;"/> 待收货</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import pickUp from '@/components/img/xrIcons/pickup'
import Paid from '@/components/img/xrIcons/paid'
import unPaid from '@/components/img/xrIcons/unpaid'
import Done from '@/components/img/xrIcons/done'
import Orders from '@/components/img/xrIcons/Orders'

const params = reactive({
  pageNo: 1,
  pageSize: 5
})
</script>

<style lang="scss" scoped>
$xrborder: 1px solid #f8a134;
.wrapper {
  height: 100%;
  .el-main, .el-aside {
    padding: 30px 20px;
  }

  .el-menu-item {
    border-radius: 8px;
    height: 60px;

    background-color: #fff5e9;
    transition: all 0.3s; /* 添加过渡效果 */

    &.is-active {
      background-color: #efbc71; /* 选中项橙色背景 */
      color: #fff; /* 白色文字 */
      //border-right: $xrborder; /* 右侧橙色边框 */

      /* 图标颜色同步修改 */
      i {
        color: #fff !important;
      }
    }

    &:hover:not(.is-active) {
      background-color: #fffaf0; /* 非选中项悬停背景 */
    }
  }

  .orange-menu {
    ::v-deep .el-menu {
      border-right: 0;
      /* 选中项文字和图标颜色 */
      .is-active {
        color: #fff !important;
        i {
          color: #fff !important;
        }
      }
    }
  }
}
</style>